import React from "react";
import styles from "./ballsAddedInCart.module.scss";
import Button from "../button/button";
import { useAppDispatch } from "../../store/hooks";
import { deleteBallOnCart } from "../../store/cart/cart.slice";
import { IBall } from "../ballCard/ballCard.types";

interface IBallsProps {
  balls: IBall;
}

export const BallsAddedInCart = ({ balls }: IBallsProps) => {
  const dispatch = useAppDispatch();
  const deleteItem = () => {
    dispatch(deleteBallOnCart(balls.id));
  };
  return (
    <>
      <div className={styles.ballsInCart}>
        <div className={styles.item}>
          <div className={styles.img_name}>
            <p className={styles.name}>{balls.name}</p>
            <img src={balls.image} width={150} height={150} />
          </div>
          <div className={styles.price_count}>
            <p>Стоимость: {balls.price} р.</p>
            <p>Количество:</p>
            <div className={styles.count}>
              <button className={styles.decrement}>-</button>
              <p> {balls.count}</p>
              <button className={styles.increment}>+</button>
            </div>
            <Button onClick={deleteItem} className={styles.customButton}>
              Удалить
            </Button>
          </div>
        </div>
      </div>
    </>
  );
};
